<!--
 * @Author: your name
 * @Date: 2021-01-04 11:38:57
 * @LastEditTime: 2021-01-26 00:06:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="add-page">
    <Breadcrumb :navList="['页面管理','添加页面']"></Breadcrumb>
    <div class="container">
      <div class="form-box">
        <el-form
          ref="subform"
          :rules="rules"
          :model="sizeForm"
          label-width="80px"
          size="mini"
        >
          <el-form-item prop="page_name" label="页面名称">
            <el-input
              placeholder="请输入页面名称"
              v-model="sizeForm.page_name"
            ></el-input>
          </el-form-item>
          <el-form-item prop="page_route" label="页面路由路径">
            <el-input
              placeholder="请输入页面路由路径 例:tou-tiao"
              v-model="sizeForm.page_route"
            ></el-input>
          </el-form-item>
          <el-form-item prop="page_path" label="页面完整路径">
            <el-input
              disabled
              :value="sizeForm.page_path + sizeForm.page_route"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              placeholder="请输入页面备注"
              v-model="sizeForm.page_comment"
            ></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sizeForm: {
        page_name: "",
        page_comment: "", //备注
        page_route: "",
        page_path: "http://www.suhongxuan.cn/#/land/",
      },
      rules: {
        page_name: [
          { required: true, message: "请输入页面名称", trigger: "blur" },
        ],
        page_route: [
          { required: true, message: "请输入页面路由", trigger: "blur" },
        ],
        page_path: [
          { required: true, message: "请输入页面完整路径", trigger: "blur" },
        ],
      },
      imageUrl: "", //   选择图片
    };
  },
  methods: {
    //   提交表单
    onSubmit() {
      this.$refs["subform"].validate(async (valid) => {
        if (valid) {
          this.sizeForm.page_path += this.sizeForm.page_route;
          this.sizeForm.page_route = "land/" + this.sizeForm.page_route;
          const { code, msg } = await this.$api.addPage(this.sizeForm);
          if (!code) {
            this.$message.success(msg);
          }
          for (let key in this.sizeForm) {
            if (key == "page_path") continue;
            this.sizeForm[key] = "";
          }
        } else {
          this.$message.error("请输入有效的值!");
          return;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.add-page {
}
</style>